<template>
  <div class="btn-list" :style="gridStyle">
    <div v-for="(item,index) in widget.UI.data.items" :key="index" @click="btnClick(index)"
         :style="containerStyle(index)" class="position-relative">
      <!--      <el-image v-if="item.backgroundImage" class="img" :src="`${assetBaseUrl}/file/download/${item.backgroundImage}`"></el-image>-->
      <p class="flex-justify-center txt" v-if="!widget.UI.data.itemData.displayImage">
        <i v-if="item.icon"
           class="iconfont mar-rgt-5"
           :style="{...styles.iconStyles}"
           :class="backgroundIconClass(item.icon)"
        ></i>
        <pre v-if="item.text && !widget.UI.data.itemData.displayImage"
             :style="{...styles.textStyles}">{{item.text}}</pre>
      </p>
    </div>
  </div>
</template>

<script>
  import {formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {WidgetButtonList} from "@/modules/IDE/widget/atom/widgetButtonList";
  import iconfont from "@/assets/font/iconfont.json";
  import {assetBaseUrl} from "@/config/env";

  export default {
    name: 'ButtonListWidget',
    props: {
      widget: {
        type: WidgetButtonList,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        formatColor: formatColor,
        activeBtnIdx: 0,
        assetBaseUrl: assetBaseUrl
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {
          itemSize = {},
          itemData = {},
        } = this.widget.UI.data
        const iconStyles = {};
        const textStyles = {};
        itemData && (textStyles.fontSize = itemData.textSize + 'px');
        itemData && (iconStyles.fontSize = itemData.iconSize + 'px');
        return {
          textStyles: textStyles,
          iconStyles: iconStyles,
        };
      },
      containerStyle() {
        return (idx) => {
          const {itemData = {}, itemSize = {}, itemSpace = {}, items} = this.widget.UI.data;
          const {
            color,
            activeColor,
            backGroundColor: bgColor,
            activeBackGroundColor: activeBgColor,
            radius,
            displayImage
          } = itemData;
          return {
            'color': formatColor(this.activeBtnIdx === idx ? activeColor : color, this.activeTheme),
            'backgroundColor': !displayImage
              ? formatColor(this.activeBtnIdx === idx ? activeBgColor : bgColor, this.activeTheme)
              : 'transparent',  // Assuming transparent background when displayImage is true
            'backgroundImage': displayImage ? this.activeBtnIdx === idx
              ? `url(${this.assetBaseUrl}/file/download/${items[idx].activeBackgroundImage})`
              : `url(${this.assetBaseUrl}/file/download/${items[idx].backgroundImage})` : null,
            'backgroundSize': '100% 100%',
            'borderRadius': radius + 'px',
            'width': itemSize.width + 'px',
            'height': itemSize.height + 'px',
            //'marginRight': itemSpace.mainAxisSpace + 'px',
            //'marginBottom': itemSpace.crossAxisSpace + 'px'
          }
        };
      },
      gridStyle() {
        const {itemSize = {}, itemSpace = {}, align} = this.widget.UI.data;
        return {
          gridRowGap: itemSpace.crossAxisSpace + 'px',
          gridColumnGap: itemSpace.mainAxisSpace + 'px',
          gridTemplateColumns: `repeat(auto-fit, ${itemSize.width + 'px'})`,
          justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center'
        }
      }
    },
    methods: {
      backgroundIconClass(val) {
        const {font_class = ''} = iconfont.glyphs.find(icon => {
          return icon.unicode === val;
        }) || {};
        return `icon-${font_class}`;
      },
      btnClick(idx) {
        this.activeBtnIdx = idx;
      }
    }
  };
</script>

<style scoped lang="less">
  .btn-list {
    display: grid;
    grid-auto-flow: row;
    // grid-template-columns: repeat(auto-fill, 100px);
    .txt {
      margin: 0;
      width: 100%;
      z-index: 99;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
    }

    .img {
      width: 100%;
      height: 100%;
      z-index: 1;
      top: 0;
      position: absolute;
    }
  }
</style>
